<template>

	<view class="index" v-if="loadStatus">
		<view class="header">
			<view class="user-info flex align-center">
				<view class="avatar margin-right-xs">
					<open-data type="userAvatarUrl" class="img"></open-data>
				</view>
				<view class="username">
					<view class="id">用户ID: {{userInfo.id}}</view>
					<open-data type="userNickName"></open-data>
				</view>
			</view>

			<view class="count flex justify-around align-center text-center">
				<view class="item">
					<view class="text-price">{{numberFormatter(balance)}}</view>
					<view class="name text-gray text-sm">帐户余额</view>
				</view>
				<view class="item">
					<view class="">{{account_number}}</view>
					<view class="name text-gray text-sm">帐户</view>
				</view>
				<view class="item">
					<view class="">{{funds_number}}</view>
					<view class="name text-gray text-sm">记帐数量</view>
				</view>
			</view>
		</view>

		<view class="bg"></view>

		<u-grid :border="false">
			<u-grid-item>
				<navigator url="/pages/funds/transfer" class="cu-item">
					<view class="icon">
						<image src="/static/tabbar/home_active.png" mode="widthFix"></image>
					</view>
					<text class="text-sm text-black">转帐记录</text>
				</navigator>
			</u-grid-item>
			<u-grid-item>
				<navigator url="/pages/funds/category" class="cu-item">
					<view class="icon">
						<image src="/static/category.png" mode="widthFix"></image>
					</view>
					<text class="text-sm text-black">分类管理</text>
				</navigator>
			</u-grid-item>
			<u-grid-item>
				<button open-type="share" class="cu-item">
					<view class="icon">
						<image src="/static/share.png" mode="widthFix"></image>
					</view>
					<text class="text-sm text-black">分享好友</text>
				</button>
			</u-grid-item>
			<u-grid-item>
				<navigator url="/pages/my/group" class="cu-item">
					<view class="icon">
						<image src="/static/group.png" mode="widthFix"></image>
					</view>
					<text class="text-sm text-black">成员管理</text>
				</navigator>
			</u-grid-item>
			<u-grid-item>
				<navigator url="/pages/my/feedback" class="cu-item">
					<view class="icon">
						<image src="/static/feedback.png" mode="widthFix"></image>
					</view>
					<text class="text-sm text-black">意见反馈</text>
				</navigator>
			</u-grid-item>
			<u-grid-item>
				<view @tap="showAd" class="cu-item">
					<view class="icon">
						<image src="/static/tabbar/add.png" mode="widthFix"></image>
					</view>
					<text class="text-sm text-black">增加账户数量</text>
				</view>
			</u-grid-item>
		</u-grid>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import userModel from '@/models/UserModel.js'
	import config from '@/config/config.js'

	let rewardedVideoAd = null

	export default {
		computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {
				loadStatus: false,
				balance: 0,
				account_number: 0,
				funds_number: 0
			}
		},
		async onLoad() {
			uni.showLoading();
			await this.get_info()
			this.loadStatus = true;
			uni.hideLoading();

			if (wx.createRewardedVideoAd) {
				rewardedVideoAd = wx.createRewardedVideoAd({
					adUnitId: 'adunit-85a3d2051893c284'
				})
				rewardedVideoAd.onLoad(() => {
					console.log('onLoad event emit 激励视频 广告加载成功')
				})
				rewardedVideoAd.onError((err) => {
					console.log('onError event emit', err)
				})
				rewardedVideoAd.onClose((res) => {
					console.log('onClose event emit', res)
					if (res && res.isEnded) {
						UserModel.addAccount().then(result => {
							this.userInfo.account_number++
							this.changeUserInfo(this.userInfo)
						})
					}
				})
			}
		},
		async onPullDownRefresh() {
			this.get_info()
			uni.stopPullDownRefresh();
		},
		onShareAppMessage() {
			return {
				path: '/pages/index/index',
				title: `记帐好习惯,${config.appName}！`,
				imageUrl: '/static/poster.png'
			}
		},
		methods: {
			...mapMutations(['changeUserInfo']),
			async get_info() {
				const res = await userModel.index()
				if (res.code == 200) {
					this.balance = res.data.balance;
					this.account_number = res.data.account_number;
					this.funds_number = res.data.funds_number;
				}
			},
			showAd() {
				rewardedVideoAd.show()
					.catch(() => {
						rewardedVideoAd.load()
							.then(() => rewardedVideoAd.show())
							.catch(err => {
								console.log('激励视频 广告显示失败')
							})
					})
			}
		}
	}
</script>

<style lang="less" scoped>
	.index {
		.header {
			.user-info {
				padding: 40upx;
				border-bottom: 1upx solid #eee;

				.avatar {
					width: 120upx;
					height: 120upx;
					border-radius: 60upx;
					overflow: hidden;
					margin-right: 20rpx;
				}

			}


			.count {
				padding: 40upx 0;

				.name {
					margin-top: 10upx;
				}
			}
		}

		button.cu-item {
			margin: 0;
			line-height: normal;
			background: #fff;

			&:after {
				border: none;
			}
		}

		.cu-item {
			text-align: center;
			padding: 20rpx 0;

			.icon {
				margin-bottom: 10rpx;

				image {
					width: 60upx;
					height: 60upx;
				}
			}

		}

		.bg {
			background: #F5F5F5;
			height: 20upx;
			width: 750upx;
		}


	}
</style>